<!-- 
Airports Components used for example purpose
@author LATAM Enterprise Architect
@author cesar.pasache@lan.com (César Pasache)
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:cc="http://java.sun.com/jsf/composite">

	<!-- This must have at least one attribute -->
	<cc:interface>	
		<cc:attribute name="airports" type="java.util.Collection"/>
		<cc:attribute name="widgetVar" type="java.lang.String"/>
	</cc:interface>	

	<cc:implementation>
		<h:outputScript name="ammap.js" library="js" target="head"/>
		<h:outputScript name="worldLow.js" library="js" target="head"/>		
		<h:outputStylesheet name="ammap.css" library="css" target="head"/>
		
        <ui:insert name="status">
			<script>
				var #{cc.attrs.widgetVar}; 
				AmCharts.ready(function() {
					#{cc.attrs.widgetVar} = new AmCharts.AmMap();
					#{cc.attrs.widgetVar}.pathToImages = "../resources/images/ammaps/";
		        	
					#{cc.attrs.widgetVar}.areasSettings.alpha = 1;
					#{cc.attrs.widgetVar}.areasSettings.color = "#bbbbbb";
					
		        	var dataProvider = {
		                    mapVar: AmCharts.maps.worldLow,
		                    getAreasFromMap:true
		                }; 
		           
		        	#{cc.attrs.widgetVar}.dataProvider = dataProvider;		
		        	#{cc.attrs.widgetVar}.mouseWheelZoomEnabled = false;
		        	
		        	#{cc.attrs.widgetVar}.dataProvider.images = [
		        	             								<ui:repeat var="airport" value="#{cc.attrs.airports}">
		        	           	                             {
		        	           	                            	 imageURL: "../resources/images/airport#{airport.status}.png",
		        	           	                            	 fixedSize:false,
		        	           	                            	 height: 15,
		        	           	                            	 width: 15,
		        	           	                            	 title: "#{airport.iataCode}",
		        	           		                             latitude: #{airport.latitude},
		        	           		                             longitude: #{airport.longitude} 
		        	           		                         },
		        	           								</ui:repeat>
		        	           						];
		        	#{cc.attrs.widgetVar}.updateAirports = function( airports ){
		                var images = new Array();
		                var idx;
		                for(idx=0;idx &lt; airports.length;idx++){
		                	images[idx] = {
  	                            	 imageURL: "../resources/images/airport" + airports[idx].status + ".png",
  	                            	 fixedSize:false,
  	                            	 height: 15,
  	                            	 width: 15,   	                            	 
  	                            	 title: airports[idx].iataCode,
   		                             latitude: airports[idx].latitude,
   		                             longitude:airports[idx].longitude 
   		                         };
		                }
		                #{cc.attrs.widgetVar}.dataProvider.images = images;
		                
		                var zoomLevel = #{cc.attrs.widgetVar}.zoomLevel();
		                var zoomX = #{cc.attrs.widgetVar}.zoomX();
		                var zoomY = #{cc.attrs.widgetVar}.zoomY();
		                
		                #{cc.attrs.widgetVar}.validateData();
		                #{cc.attrs.widgetVar}.zoomTo( zoomLevel, zoomX, zoomY, true );
		        	};
		        	#{cc.attrs.widgetVar}.write("#{cc.attrs.widgetVar}.mapdiv");
				});
			</script>
			<div id="#{cc.attrs.widgetVar}.mapdiv" 
				style="background-color:#FFFFFF; height: 500px; width: 975px;margin: 0px auto;"></div>
        </ui:insert>
	</cc:implementation>
</html>